import { useCountStore } from "@/store/task";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select, { SelectChangeEvent } from "@mui/material/Select";

export default function SelectAutoWidth(props: any) {
  const { dataSource, placeHolder, value, type } = props;
  const { setBacterialFilter, setPhageFilter, setProPhageFilter } =
    useCountStore();

  const handleChange = (event: SelectChangeEvent) => {
    if (type == "bacteria") {
      setBacterialFilter([event.target.value]);
    } else if (type == "phage") {
      console.log(event.target.value, "value");
      setPhageFilter([event.target.value]);
    } else if (type == "proPhage") {
      setProPhageFilter([event.target.value]);
    }
  };

  return (
    <div>
      <FormControl fullWidth sx={{ height: "60px" }}>
        <InputLabel id="demo-simple-select-autowidth-label">
          {placeHolder}
        </InputLabel>
        <Select
          labelId="demo-simple-select-autowidth-label"
          id="demo-simple-select-autowidth"
          value={value}
          onChange={handleChange}
          fullWidth
          label="Age"
          MenuProps={{
            sx: {
              height: "300px",
              overflowY: "auot",
            },
          }}
        >
          {dataSource.map((name: any) => (
            <MenuItem value={name} key={name}>
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}
